<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
    #body{
	   width:500px;
	   height:500px;
	   border:solid 1px black;
	   margin:auto;
	   position:relative;
	}
    #div{
	  width:120px;
	  height:100px;
	  border:solid 1px red;
      position:absolute;
	  left:50px;
	  top:120px;
	}
  </style>
 </head>
 <body>
    <div id="body">
	   <div id="div"></div>
	</div>
 </body>
 <script>
    var body = document.getElementById("body");
	var div = document.getElementById("div");
	alert("bodywidthd="+body.offsetWidth);
	alert("bodyheight="+body.offsetHeight);
	alert("divWidth="+div.offsetWidth);
	alert("divHeight="+div.offsetHeight);
	alert("div.Left="+div.offsetLeft);
	alert("div.top="+div.offsetTop);
 </script>
</html>
